<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="找人才" :isAppBtn="false"></HeadCustom>
		<view v-if="listConfig.loading == 'not-data'">
			<NotEmpty text="暂未发布职位，无法匹配人才" btn="发布职位" @btn="$pageTo('/recruit/enterprise/publishRecruitment?companyId='+companyId)" />
		</view>
		<view class="card-box" v-else>
			<view class="card-hd fboxRow Ycenter">
				<NavFilter :companyId="companyId" :reqData="reqData" :isMore="true" :isFilter="true" @change="tabsClick" />
			</view>
			<view class="card-bd fboxCol Ycenter Xcenter">
				<view class="card-scroll" v-if="listData.length || listConfig.loading =='loading'">
					<scroll-view  class="card-scroll" :scroll-top="scrollTop" scroll-y="true" 
					:style="{height: scrollHeight +'px'}"
					@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<view class="ptb40">
							<view v-for="(item, index) in listData" :key="index">
								<vitaItem type="talent" :innerData="item" :jobId="jobId" />
							</view>
							<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
					</view>
					</scroll-view>
				</view>
				<view v-if="listConfig.loading == 'list-not'">
					<NotEmpty text="暂无相关人才" :height="scrollHeight" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {resumePage, resumeRecommend} from '@/api/recruit.js';
	import vitaItem from '../components/vita-item.vue';
	import NavFilter from '../components/nav-filter.vue';
	import {listMixins} from '../common/list.mixins.js';
	export default {
		mixins: [listMixins],
		components:{vitaItem, NavFilter},
		data() {
			return {
				theme: getApp().globalData.appTheme,
				globalColor: getApp().globalData.globalColor,
				scrollTop: 0,
				listConfig: {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				},
				listData: [],
				jobId: '',
				positionType: '',
				companyId: getApp().globalData.companyId,
				reqData: {
					experienceList: [],
					educationList: [],
					expectCityId: '',
					age: '',
					ageMin: '',
					ageMax: '',
					gender: '',
					salary: '',
					salaryMin: '',
					salaryMax: '',
				},
				scrollHeight: 0,
				isRec: true
			}
		},
		onLoad() {
			this.getInit()
		},
		onReady() {
			this.getHeight('.head-custom-wrap, .card-hd')
		},
		onShow(){
			const filterTemp = getApp().globalData.filterTemp
			if(filterTemp.hasOwnProperty('expectCityId')){
				this.reqData = filterTemp
				this.reqData.ageMin= filterTemp.age && filterTemp.age.split('-')[0]
				this.reqData.ageMax= filterTemp.age && filterTemp.age.split('-')[1]
				this.reqData.salaryMin= filterTemp.salary && filterTemp.salary.split('-')[0]
				this.reqData.salaryMax= filterTemp.salary && filterTemp.salary.split('-')[1]
				if(this.isRec){
					this.getInit()
					this.getRec()
				}
			}
			if(this.jobId){
				this.getInit()
				this.getList()
			}
		},
		onUnload() {
			getApp().globalData.filterTemp  = {}
		},
		methods: {
			tabsClick(e){
				console.log(e)
				this.getInit()
				if(e.jobId == '综合'){
					this.jobId = ''
					this.getRec()
				}else{
					this.jobId = e.jobId
					this.positionType = e.positionType
					this.getList()
				}
				this.scrollTop = 0
			},
			getInit(){
				this.listConfig = {
					current: 1,
					size: 20,
					count: 0,
					loading: 'loading'
				}
				this.listData = []
			},
			getRec(){
				resumeRecommend({companyId: this.companyId,
					...this.reqData
				}).then(res=>{
					if(res.data.length){
						this.listData = res.data
						this.listConfig.loading = 'nomore'
					}else{
						this.listConfig.loading = 'list-not'
					}
				})
			},
			getList(){
				const { current, size, loading} = this.listConfig
				resumePage({current, size, jobId: this.jobId,
					companyId: this.companyId,
					...this.reqData
				}).then(res=>{
					if(this.listData.length){
						this.listData = this.listData.concat(res.data.list) 
					}else{
						this.listData = res.data.list
					}
					this.listLoading(res)
				})
			},
			upper(e) {
				console.log('upper',e)
			},
			lower(e) {
				console.log('lower',e)
				this.listMore()
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap{min-height: calc(100vh);}	
	// .card-box .card-hd{padding: 0 40rpx 0 20rpx;}
	.card-hd{position: relative;}
	.u-tabs{width: 750rpx;}
	.moreNav{position: absolute;left: 0; right: 0; top: 90rpx;z-index: 60; padding: 24rpx 24rpx 0 40rpx; height: 328rpx;background: var(--darkViewBgColor);}
	.nav-tag{margin: 16rpx 16rpx 0 0; width: 212rpx;height: 72rpx; line-height: 72rpx;text-align: center; border-radius: 8rpx;}
	.moreNav /deep/.u-scroll-list__indicator{margin-top: 20rpx;}
	
	.more-action{}
	.more-action .icon{width: 40rpx;height: 40rpx}
	.more-btn{margin:0 32rpx 0 10rpx;width: 116rpx;height: 48rpx;background: var(--viewBgColor);border-radius: 4rpx;}
	// .card-scroll{height: calc(90vh);}
</style>
